// 权限页面：通过导航守卫来控制页面访问
/**
 * 全局前置导航守卫：是一个在路由跳转页面之前会触发的一个函数
 *
 * 语法：
 * router.beforeEach((to, from, next) => {
    // to: 去哪里，跳转的目标路由对象
    // from: 从哪里来，当前路由对象(跳转之前的路由对象)
    // next: 放行函数，控制跳转是否能够进入页面
    console.log(to, from, next)
    })
 *
*/
import router from './router'
import store from './store'

router.beforeEach(async(to, from, next) => {
  // to: 去哪里，跳转的目标路由对象
  // from: 从哪里来，当前路由对象(跳转之前的路由对象)
  // next: 放行函数，控制跳转是否能够进入页面，如果没有调用next，则页面会直接卡主出现一片空白
  //   console.log(to, from, next)
  /**
   * 需求：除了登录、404页面之外的所有页面都必须登录后才能访问
   *  to.path 跳转的目标路由路径
   *  token 判断是否已登录，token值存在说明已登录 否则未登录
   * */
  // 获取模块中的变量的语法： store.state.模块名.变量名

  if (store.state.user.token) {
    // 已登录
    // 已登录的状态,不允许访问登录页面,当判断到访问登录页 的时候,直接跳转到首页
    if (to.path === '/login') {
      next('/')
    } else {
      // 调用获取用户信息函数
      // 当用户信息不存在的时候才调用接口，（刷新浏览器的时候）
      // 用户ID是一定存在的，所以可以通过userId来判断用户信息是否存在

      if (!store.state.user.userInfo.userId) {
        await store.dispatch('user/getUserInfo')

        // 为了确保获取到menus数组，必须要写在获取用户信息之后
        const routes = await store.dispatch('permission/filterRoutes',
          store.getters.menus)
        // console.log(routes)
        // 把筛选出来的具有权限的动态路由数组重新添加回路由规则中
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])
        next(to.path)
      }
      next()
    }
  } else {
    // 未登录
    // 创建白名单:这个数组中的路由路径都是可以不登录直接访问的页面
    const whiteArr = ['/login', '/404', '/test']
    // if (to.path === '/login' || to.path === '/404') {
    // 优化代码:只要判断到跳转的目标路径存在在白名单数组中,则可以直接放行,判断方法为indexOf
    if (whiteArr.indexOf(to.path) !== -1) {
      next()
    } else {
      // 跳转到登录页面
      next('/login')
    }
  }
})
